<template>
  <div class="categoryList">
    <div class="scroller">
      <ul class="categories">
        <li v-for="(item,index) in catelist" :key="index" @click="changeIndex(index)" :class="{on: index === txtIndex}">
          <a :class="{on: index === txtIndex}">{{item.name}}</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import BSCroll from 'better-scroll'
  import PubSub from 'pubsub-js'
  
  export default {
    name: 'index',
    data () {
      return {
        txtIndex: 0,
      }
    },
    computed: {
      ...mapState({
        catelist: state => state.categoryList.catelist
      })
    },
    methods: {
      changeIndex(index){
        this.txtIndex = index
        PubSub.publish('showSub',index)
      },
    },
    mounted(){
      this.$nextTick(()=>{
        new BSCroll('.categoryList',{
          scrollY: true,
          click: true
        })
      })
    },
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .categoryList
    height 1148px
    width 162px
    overflow hidden
    .scroller
      padding 40px 0
      box-sizing border-box
      .categories
        display flex
        height 1140px
        flex-direction column
        justify-content space-between
        align-items center
        position relative
        li
          margin-top 40px
          &:nth-child(1)
            margin-top 0
          &.on
            color #b4282d
            &:before
              display inline-block
              vertical-align middle
              height 50px
              width 6px
              background #b4282d
              content ''
              position absolute
              left 0
          a
            display inline-block
            vertical-align middle
            font-size 28px
            line-height 50px
            height 50px
            &.on
              color #b4282d
</style>
